<template>
	<root-node class="tinymcePage disflex ju_bt">
		<div>
			<Tinymce v-model="textarea" height="500px"></Tinymce>
		</div>
		<div class="htmlContent" v-html="textarea"></div>
	</root-node>
</template>

<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
	name: "TinymcePage",
});
</script>

<script lang="ts" setup>
import { defineAsyncComponent, ref } from "vue";
const Tinymce = defineAsyncComponent(() => import("@/components/tinymce/index.vue"));

const textarea = ref("<h1 style='text-align: center;'>Welcome to the TinyMCE demo!</h1>");
</script>

<style lang="scss" scoped>
.tinymcePage {
	width: 100%;
	& > div {
		width: 49.5%;
		min-height: $main-height-box;
	}
}
.htmlContent {
	width: 100%;
	overflow: auto;
	padding: 20px;
	border: 1px solid #ddd;
}
</style>
